<script lang="ts" setup>
  import { reactive } from 'vue'
  import { ref } from 'vue'
  // 数据
  let car = reactive({
    brand: '奔驰',
    price: 280000.00
  });

  let company = ref("蝉思管理");

  let games = reactive([{ name: '张三', age: 16, sex: '男' }, { name: '王五', age: 16, sex: '女' }, { name: '马六', age: 16, sex: '男' }])

  // 方法 
  function changePrice () {
    car.price += 50;
    console.log("修改后的价格", car.price);
  }

  function changeAge () {
    // games =
    // games
    //   .array
    //   .forEach(element => {
    //     element.age += 1;
    //   });
  }
  function chanceCompany () {
    company.value = "北京蝉思管理咨询有限公司";
  }
</script>

<template>
  <div>
    <h1>{{company}}</h1>
    <h2>一辆：{{car.brand}}车，价值{{car.price}}</h2>
    <ul>
      <li v-for="item in games" :key="item.id">
        {{ item.name }} - {{ item.age }} - {{ item.sex }}
      </li>
    </ul>
  </div>
  <div>
    <button @click="changePrice()">修改价格</button>
    <button @click="changeAge()">修改汽车的年龄</button>
    <button @click="chanceCompany()">修改公司名</button>
  </div>
</template>